<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <!-- <el-form-item label="" prop="crewId">
      <el-input v-model="dataForm.crewId" placeholder=""></el-input>
      </el-form-item>-->
      <el-form-item label="起始时间" prop="startTime">
        <!-- <el-input v-model="dataForm.startTime" placeholder="起始时间"></el-input> -->
        <el-date-picker
          v-model="dataForm.startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="终止时间" prop="endTime">
        <!-- <el-input v-model="dataForm.endTime" placeholder="终止时间"></el-input> -->
        <el-date-picker
          v-model="dataForm.endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="职务" prop="crewPost">
        <!-- <el-input v-model="dataForm.crewPost" placeholder="职务"></el-input> -->
        <el-select v-model="dataForm.crewPost" placeholder="请选择">
          <el-option
            v-for="item in optionsCrewPost"
            :key="item.id"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="companyName">
        <el-input v-model="dataForm.companyName" placeholder="公司名称"></el-input>
      </el-form-item>
      <el-form-item label="船舶名称" prop="vesselName">
        <el-input v-model="dataForm.vesselName" placeholder="船舶名称"></el-input>
      </el-form-item>
      <el-form-item label="船东名称" prop="shipownerName">
        <el-input v-model="dataForm.shipownerName" placeholder="船东名称"></el-input>
      </el-form-item>
      <el-form-item label="船舶类型" prop="shipType">
        <!-- <el-input v-model="dataForm.shipType" placeholder="船舶类型"></el-input> -->
        <el-select v-model="dataForm.shipType" placeholder="请选择">
          <el-option
            v-for="item in optionsShipType"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主机型号" prop="hostModel">
        <el-input v-model="dataForm.hostModel" placeholder="主机型号"></el-input>
      </el-form-item>
      <el-form-item label="航区" prop="navigationArea">
        <!-- <el-input v-model="dataForm.navigationArea" placeholder="航区"></el-input> -->
        <el-select v-model="dataForm.navigationArea" placeholder="请选择">
          <el-option
            v-for="item in optionsNavigationArea"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        workExperienceId: 0,
        crewId: "",
        startTime: "",
        endTime: "",
        crewPost: "",
        companyName: "",
        vesselName: "",
        shipownerName: "",
        shipType: "",
        hostModel: "",
        navigationArea: ""
      },
      dataRule: {
        crewId: [{ required: true, message: "不能为空", trigger: "blur" }],
        startTime: [
          { required: true, message: "起始时间不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "终止时间不能为空", trigger: "blur" }
        ],
        crewPost: [
          { required: true, message: "职务不能为空", trigger: "blur" }
        ],
        companyName: [
          { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        vesselName: [
          { required: true, message: "船舶名称不能为空", trigger: "blur" }
        ],
        shipownerName: [
          { required: true, message: "船东名称不能为空", trigger: "blur" }
        ],
        shipType: [
          { required: true, message: "船舶类型不能为空", trigger: "blur" }
        ],
        hostModel: [
          { required: true, message: "主机型号不能为空", trigger: "blur" }
        ],
        navigationArea: [
          { required: true, message: "航区不能为空", trigger: "blur" }
        ]
      },
      optionsCrewPost: [],
      optionsShipType: [],
      optionsNavigationArea: []
    };
  },
  methods: {
    init(id) {
      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${1}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsCrewPost = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${15}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsShipType = data && data.code === 0 ? data.list : [];
      });

      this.$http({
        url: this.$http.adornUrl(`/generator/datadictionary/info/${16}`),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.optionsNavigationArea = data && data.code === 0 ? data.list : [];
      });

      this.dataForm.workExperienceId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.workExperienceId) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/experienceinfo/info/${this.dataForm.workExperienceId}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.crewId = data.experienceInfo.crewId;
              this.dataForm.startTime = data.experienceInfo.startTime;
              this.dataForm.endTime = data.experienceInfo.endTime;
              this.dataForm.crewPost = data.experienceInfo.crewPost;
              this.dataForm.companyName = data.experienceInfo.companyName;
              this.dataForm.vesselName = data.experienceInfo.vesselName;
              this.dataForm.shipownerName = data.experienceInfo.shipownerName;
              this.dataForm.shipType = data.experienceInfo.shipType;
              this.dataForm.hostModel = data.experienceInfo.hostModel;
              this.dataForm.navigationArea = data.experienceInfo.navigationArea;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/experienceinfo/${
                !this.dataForm.workExperienceId ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              workExperienceId: this.dataForm.workExperienceId || undefined,
              crewId: this.dataForm.crewId,
              startTime: this.dataForm.startTime,
              endTime: this.dataForm.endTime,
              crewPost: this.dataForm.crewPost,
              companyName: this.dataForm.companyName,
              vesselName: this.dataForm.vesselName,
              shipownerName: this.dataForm.shipownerName,
              shipType: this.dataForm.shipType,
              hostModel: this.dataForm.hostModel,
              navigationArea: this.dataForm.navigationArea
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
